<template>
  <div class="aside">
    <el-menu
      text-color="#fff"
      active-text-color="#7DE9FF"
      default-active="0"
      :default-openeds="['0','1','2']"
      :collapse-transition="false"
      class="el-menu-vertical-demo font-20 fontW-b font-f-ib"
      :collapse="isCollapse"
      :unique-opened="true"
      @open="handleOpen"
      @select="hundleSelect"
      @close="handleClose"
      >
      <!-- 一级菜单 -->
      <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
        <!-- 一级菜单的模板区域 -->
        <template slot="title">
          <!-- 图标 -->
          <!-- <i :class="iconsObj[item.id]"></i> -->
          <!-- <i class="el-icon-menu"></i> -->
          <!-- 文本 -->
          <div class="flex-s-between">
          <span class="">{{$t('rankingMenu.'+ item.authName)}}</span>
          <img src="../../assets/icon/download.svg" alt="">
          </div>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item :index="sunItem.id + ''" v-for="sunItem in item.children" :key="sunItem.id">
          <template slot="title">
            <!-- 二级菜单的模板区域 -->
            <!-- <i class="el-icon-menu"></i> -->
            <!-- <i class="el-icon-s-help"></i> -->
            <!-- 图标 -->
            <img :src="sunItem.img_url" alt="" style="width:10%">
            <span  class="fontW-7 font-12 color-f" v-if="sunItem.cid">{{$t('rankingMenu.'+ sunItem.authName)}}</span>
            <span  class="fontW-7 font-12 color-f" v-else>{{ sunItem.authName }}</span>
            <!-- 文本 -->
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    isCollapse: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    // console.log(this.menuList, this.isCollapse)
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath, 'handleOpen', JSON.stringify(key))
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath, 'handleClose', JSON.stringify(key))
    },
    hundleSelect: function (key, keyPath) {
      console.log(key, keyPath, 'hundleSelect', JSON.stringify(key))
      this.$emit('changeData', key)
    }
  }
}
</script>
<style lang="less" scoped>
.aside {
  width: 100%;
  height: auto;
  /deep/.el-menu {
    background: none;
    /deep/.el-submenu__title {
      color: none;
    }
    /deep/.el-submenu__title:hover {
      background: none;
    }
    /deep/.el-submenu:hover {
      background: none;
    }
  }
}
/deep/.el-submenu__title {
  background: #000;
  border-radius: 5px;
}
/deep/.el-submenu__title i{
  opacity: 0;
}
</style>
<style>
.el-menu--vertical .el-menu{
  background: #585858;
}
</style>
